<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习-笑脸</title>
</head>

<body>
    <canvas id="can" width="500" height="500" style="border:solid 1px red;"></canvas>
    <script>
        var c = document.getElementById("can");
        var objClient = {
            x: c.clientWidth / 2,
            y: c.clientHeight / 2
        }
        var ctx = document.getElementById("can").getContext("2d");
        ctx.globalAlpha = 1 // 透明度
        ctx.moveTo(objClient.x, 0);
        ctx.lineTo(objClient.x, c.clientHeight);
        ctx.moveTo(0, objClient.y);
        ctx.lineWidth = 1;
        ctx.lineTo(c.clientWidth, objClient.y);
        ctx.strokeStyle = "green";
        ctx.fillText(document.title, 10, 20)
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(objClient.x, objClient.y, 120, 0, 2 * Math.PI);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 4;
        ctx.stroke();
        /**左边眼睛部分**/
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.arc(objClient.x - 50, objClient.y - 40, 30, -(30 / 180 * Math.PI), -155 / 180 * Math.PI, true)
        ctx.strokeStyle = "red";
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(objClient.x - 50, objClient.y - 40, 15, 0, 2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.stroke();
        /**右边眼睛部分**/
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.arc(objClient.x + 50, objClient.y - 40, 30, -(30 / 180 * Math.PI), -155 / 180 * Math.PI, true)
        ctx.strokeStyle = "red";
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(objClient.x + 50, objClient.y - 40, 15, 0, 2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.stroke();
        /**嘴巴部分**/
        ctx.beginPath();
        ctx.lineWidth = 8
        ctx.lineCap = "round";
        ctx.arc(objClient.x, objClient.y + 30, 50, 20 / 180 * Math.PI, 160 / 180 * Math.PI);
        // ctx.fill();
        // ctx.closePath();
        ctx.stroke();
    </script>
</body>